<template>
  <view class="forget-password">
    <uni-forms ref="formRef" :model="formData" :rules="rules">
      <uni-forms-item name="mobile">
        <uni-easyinput
          v-model="formData.mobile"
          placeholder="请输入手机号"
          type="number"
        />
      </uni-forms-item>
      
      <uni-forms-item name="verify">
        <view class="code-input">
          <uni-easyinput
            v-model="formData.verify"
            placeholder="请输入验证码"
            type="number"
          />
          <button 
            class="send-code-btn"
            :disabled="counting > 0"
            @click="sendCode"
          >
            {{ counting > 0 ? `${counting}s后重新发送` : '发送验证码' }}
          </button>
        </view>
      </uni-forms-item>

      <uni-forms-item name="password">
        <uni-easyinput
          v-model="formData.password"
          type="password"
          placeholder="请输入新密码"
        />
      </uni-forms-item>

      <uni-forms-item name="confirm_password">
        <uni-easyinput
          v-model="formData.confirm_password"
          type="password"
          placeholder="请确认新密码"
        />
      </uni-forms-item>

      <button class="submit-btn" @click="submit">确认修改</button>
    </uni-forms>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import {handleForgetPassword, ForgetPasswordParams, handleVerifyCode} from '@/api/sign'
import { ResponseResult } from '@/utils/request'


const formRef = ref()
const counting = ref(0)

const formData = reactive<ForgetPasswordParams>({
  mobile: '13719691304',
  verify: '',
  password: '',
  confirm_password: ''
})

const rules = {
  mobile: {
    rules: [
      { required: true, errorMessage: '请输入手机号' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' }
    ]
  },
  verify: {
    rules: [
      { required: true, errorMessage: '请输入验证码' },
      { pattern: /^\d{6}$/, errorMessage: '验证码为6位数字' }
    ]
  },
  password: {
    rules: [
      { required: true, errorMessage: '请输入新密码' },
      { minLength: 6, maxLength: 20, errorMessage: '密码长度在6-20位之间' }
    ]
  },
  confirm_password: {
    rules: [
      { required: true, errorMessage: '请确认新密码' },
      {
        validateFunction: (rule: any, value: string, data: any) => {
          return data.password === value || '两次输入的密码不一致'
        }
      }
    ]
  }
}

// 发送验证码
const sendCode = async () => {
  try {
    await formRef.value.validateField('mobile')
    // TODO: 调用发送验证码接口
    handleVerifyCode({mobile: formData.mobile}).then((res: ResponseResult) => {
      if (res && res.status) {
        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })
      }
    })
    counting.value = 60
    const timer = setInterval(() => {
      counting.value--
      if (counting.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
  } catch (e) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
  }
}

// 提交表单
const submit = async () => {
  try {
    await formRef.value.validate()
    // TODO: 调用重置密码接口
    handleForgetPassword(formData).then((res: ResponseResult) => {
      if (res && res.status == 1) {
        uni.showToast({
          title: '密码修改成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pageSign/login'
          })
        }, 1500)
      }
    })
    // 跳转到登录页
    
  } catch (e) {
    console.log('表单错误：', e)
  }
}
</script>

<style lang="scss" scoped>
.forget-password {
  padding: 20px;
  
  .code-input {
    display: flex;
    align-items: center;
    gap: 10px;
    
    .send-code-btn {
      width: 200rpx;
      font-size: 24rpx;
      padding: 0 10rpx;
    }
  }
}
</style>